<template>
	<view>
		<view class="status_bar flex" :style="[{height:height+'px',paddingTop:top+'px'}]">
			<view class="left" :style="{top:top+'px'}" @tap="Monitor">
				<image :src="imgurl+'zuojiantou.png'"></image>
			</view>
			编辑投票
		</view>
		<view :style="{marginTop:height+top+'px', marginBottom: 160+'rpx'}">
			<view @click="showEdit" style="background:#fff;">
				<view class="title">{{title}}</view>
				<!-- <view class="shuoming">{{text ? text : ''}}</view> -->
				<input class="shuoming" disabled type="text" :value="text" placeholder="添加投票说明" />
			</view>
			<view class="edit row" v-if="showedit" @tap="editTitle">
				<image :src="imgurl+'editother.png'"></image>
				<text>编辑</text>
			</view>
			<view class="content">
				<view class="content-item" v-for="(item,index) in list" :key="index" @tap="showList(index)">
					<view v-if="item.pid==1">
						<view class="item-title">
							<text class="spancss">{{item.xuan==2?'*':''}}</text>
							{{index+1}}.{{item.ti}}
						</view>
						<view v-if="item.yan==1">
							<view class="item-content flex" v-for="(item,index) in item.di" :key="index">
								<view>
									<span></span>
									<text>{{item.wen}}</text>
								</view>
								<view v-if="item.img" class="diImg">
									<image :src="item.img"></image>
								</view>
							</view>
						</view>
						<view v-else class="flex_ti flex">
							<view class="item-content other flex" v-for="(item,index) in item.di" :key="index">
								<view>
									<span></span>
									<text>{{item.wen}}</text>
								</view>
								<view v-if="item.img" class="diImg">
									<image :src="item.img"></image>
								</view>
							</view>
						</view>
						<view v-if="item.xuantiao">{{item.xuantiao ? '*跳转到第'+(item.xuantiao+1)+'题' : ''}}</view>
						<view v-if='item.dependTi'>依赖于第{{item.dependTi}}题 <text v-if="item.dependItem">第{{item.dependItem}}个选项</text></view>
					</view>
					<view v-if="item.pid==2">
						<view class="item-title">
							<text class="spancss">{{item.xuan==2?'*':''}}</text>
							{{index+1}}.{{item.ti}}[多选题]
							<text v-if="item.zuishao!='不限' && item.zuishao!=null && item.zuiduo!='不限' && item.zuiduo!=null ">[请选择{{item.zuishao}}至{{item.zuiduo}}项]</text>
							<text v-if="item.zuishao!=null && (item.zuiduo=='不限' || item.zuiduo==null)  && item.zuishao!='不限' ">[至少选择{{item.zuishao}}项]</text>
							<text v-if="(item.zuishao=='不限' || item.zuishao==null) && item.zuiduo!='不限' && item.zuiduo!=null ">[至多选择{{item.zuiduo}}项]</text>

						</view>
						<view v-if="item.yan==1">
							<view class="item-content" v-for="(item,index) in item.di" :key="index">
								<view>
									<span></span>
									<text>{{item.wen}}</text>
								</view>
								<view v-if="item.img" class="diImg">
									<image :src="item.img"></image>
								</view>
							</view>
						</view>
						<view v-else class="flex_ti flex">
							<view class="item-content other flex" v-for="(item,index) in item.di" :key="index">
								<view>
									<span></span>
									<text>{{item.wen}}</text>
								</view>
								<view v-if="item.img" class="diImg">
									<image :src="item.img"></image>
								</view>
							</view>
						</view>
						<view v-if="item.xuantiao">{{item.xuantiao ? '*跳转到第'+(item.xuantiao+1)+'题' : ''}}</view>
						<view v-if='item.dependTi'>依赖于第{{item.dependTi}}题 <text v-if="item.dependItem">第{{item.dependItem}}个选项</text></view>
					</view>
					<view class="tiankong" v-if="item.pid==3">
						<view class="item-title">
							<span class="spancss">{{item.xuan==2?'*':''}}</span>
							<text>{{index+1}}.{{item.ti}}</text>
						</view>
						<input :disabled="true" />
						<view v-if="item.xuantiao">{{item.xuantiao ? '*跳转到第'+(item.xuantiao+1)+'题' : ''}}</view>
						<view v-if='item.dependTi'>依赖于第{{item.dependTi}}题 <text v-if="item.dependItem">第{{item.dependItem}}个选项</text></view>
					</view>
					<view class="remark_box" v-if="item.pid==4">
						<view class="item-title">
							<text>{{item.beizhu.remark}}</text>
							<view v-if="item.beizhu.img.length > 0" class="img_box">
								<image v-for="el in item.beizhu.img" :src="el.url" mode=""></image>
							</view>
						</view>
					</view>
					<view class="list flex" v-if="item.show">
						<view class="list-item row" @tap="edit(item.id,item.pid,index, item.beizhu)">
							<image :src="imgurl+'editdc.png'"></image>
							<text>编辑</text>
						</view>
						<view v-if="item.pid !=4" class="list-item row" @tap="copy(item,item.pid,index)">
							<image :src="imgurl+'copy.png'"></image>
							<text>复制</text>
						</view>
						<view v-if="item.pid !=4" class="list-item row" @tap.stop="up(item.id,index)">
							<image :src="imgurl+'shangyi.png'"></image>
							<text>上移</text>
						</view>
						<view v-if="item.pid !=4" class="list-item row" @tap.stop="down(item.id,index)">
							<image :src="imgurl+'xiayi.png'"></image>
							<text>下移</text>
						</view>
						<view class="list-item row" @tap.stop="del(item.id)">
							<image :src="imgurl+'editdc.png'"></image>
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
			<view class="add flex" @tap="Showpopup">
				<image :src="imgurl+'add.png'"></image>
				<text>添加题目</text>
			</view>
		</view>
		<view class="footer flex">
			<view class="footer-item row" @tap="Showpopup">
				<image :src="imgurl+'timu.png'"></image>
				<text>题目</text>
			</view>
			<view class="footer-item row" @tap="questionSet">
				<image :src="imgurl+'shezhi.png'"></image>
				<text>设置</text>
			</view>
			<view class="footer-item row" @tap="yuLan">
				<image :src="imgurl+'yulan.png'"></image>
				<text>预览</text>
			</view>
			<view class="footer-item row" @tap="Save">
				<image :src="imgurl+'baocun.png'"></image>
				<text>保存</text>
			</view>
		</view>
		<uni-popup id="popup" ref="popup" type="bottom">
			<view class="popup-content" :style="{height: windowHeight-height-top+'px'}">
				<view class="main">
					<view class="top-item flex">
						<view class="left flex" @tap="oneChoice">
							<image :src="imgurl+'danxuan.png'"></image>
							<text>单选题</text>
						</view>
						<view class="center"></view>
						<view class="right flex" @tap="duoChoice">
							<image :src="imgurl+'duoxuan.png'"></image>
							<text>多选题</text>
						</view>
					</view>
					<view class="top-item flex">
						<view class="left flex" @tap="tkSubject">
							<image :src="imgurl+'tiankong.png'"></image>
							<text>填空</text>
						</view>
						<view class="center"></view>
						<view class="right flex" @tap="textLead">
							<image :src="imgurl+'daoru.png'"></image>
							<text>文本导入</text>
						</view>
					</view>
					<view class="top-item flex">
						<view class="left flex" @tap="chooseSubject">
							<image :src="imgurl+'tiku.png'"></image>
							<text>题库选题</text>
						</view>
						<view class="center"></view>
						<view class="right flex" @tap="beizhu">
							<image :src="imgurl+'fenye.png'"></image>
							<text>备注</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import app from "../../../App.vue"
	import {
		mapMutations
	} from 'vuex'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				height: "",
				top: "",
				staheight: "", //获取的状态栏高度
				imgurl: "",
				num: 1, //页数
				showedit: true, //展示编辑
				show: false, //展示弹框
				windowHeight: "",
				title: '',
				text: '',
				wenid: '', // 问卷id
				list: [],
				id: ''
			};
		},
		methods: {
			//导航栏
			Monitor() {
				if (this.show == true) {
					this.$refs.popup.close()
					this.show = false
				} else {
					uni.reLaunch({
						url: "../../index/index"
					})
				}
			},
			//编辑标题
			editTitle() {
				let that = this
				let item = {
					title: that.title,
					id: that.id,
					text: that.text,
					wenid: that.wenid
				}
				uni.navigateTo({
					url: '../editVoteTitle/editVoteTitle?item=' + JSON.stringify(item)
				})
			},
			showList(index) {
				let ids = index
				let arr = this.list
				let newArr = arr.map((item, index) => {
					if (ids === index) {
						item.show = !item.show
					}
					return item
				})
				this.list = newArr
			},
			edit(id, pid, index, beizhu) {
				let type = pid
				let item = this.list
				var xianshi = ''
				var tiaoti = ''
				app.globalData.tiid = id
				this.$store.commit('setTiIndex', index)
				if (item.length <= 1) {
					xianshi = 1
					tiaoti = 1
				} else if (index == 0 && item.length > 1) {
					xianshi = 1
				} else if (index == item.length - 1 && item.length > 1) {
					tiaoti = 1
				}
				/* if (type == 1) {
					uni.navigateTo({
						url: '../../questionType/editoneChoice/editoneChoice?id=' + id + '&wenid=' + this.wenid + '&xianshi=' + xianshi +
							'&tiaoti=' + tiaoti
					})
				} else */
				if (type == 1 || type == 2) {
					uni.navigateTo({
						url: '../../questionType/editduoChoice/editduoChoice?id=' + id + '&wenid=' + this.wenid
					})
				} else if (type == 3) {
					uni.navigateTo({
						url: '../../questionType/editText/editText?id=' + id + '&wenid=' + this.wenid
					})
				} else {
					uni.navigateTo({
						url: '../../questionType/beizhu/beizhu?id=' + id + '&wenid=' + this.wenid + '&beizhu=' + JSON.stringify(beizhu)
					})
				}
			},
			// 复制题目
			copy(item, pid, index) {
				let _this = this
				api.look({
					id: item.id,
					api: 'weitit'
				}).then(res => {
					if (res && res.code == 200) {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 1500,
							success: () => {
								_this.getTimu({
									api: 'tables',
									wenid: _this.wenid
								})
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//上移
			up(ids, index) {
				let id = ids
				let that = this
				if (index === 0) {
					uni.showToast({
						title: "第一题不能上移",
						icon: 'none'
					})
				} else {
					let data = {
						api: 'wenshang',
						wenid: this.wenid,
						id: id,
					}
					api.look(data).then(res => {
						if (res.code == 200) {
							that.getTimu({
								api: 'tables',
								wenid: that.wenid
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			//下
			down(ids, index) {
				let id = ids
				let that = this
				let len = this.list.length - 1
				if (index === len) {
					uni.showToast({
						title: "最后一题不能下移",
						icon: 'none'
					})
				} else {
					let data = {
						api: 'wenxia',
						wenid: this.wenid,
						id: id,
					}
					api.look(data).then(res => {
						if (res.code == 200) {
							that.getTimu({
								api: 'tables',
								wenid: that.wenid
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			//删除
			del(id) {
				let ids = id
				let that = this
				that.list.forEach((item, index) => {
					if (item.id == ids) {
						api.del({
							api: 'delti',
							id: ids
						}).then(res => {
							if (res.code == 200) {
								that.list.splice(index, 1)
								uni.showToast({
									title: "删除成功",
									icon: 'none',
									duration: 1000
								})
							} else {
								uni.showModal({
									content: '提示:由于此答卷已经有答卷或者设置了规则,不允许删除问卷中的题目',
									showCancel: false,
									confirmText: '知道了'
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
				})
			},
			//问卷设置
			questionSet() {
				if (this.list.length > 0) {
					this.$store.commit('setWenId', this.wenid)
					uni.navigateTo({
						url: "../../questionSet/questionSet?wenid=" + this.wenid
					})
				} else {
					uni.showToast({
						title: "此问卷没有题目,不能设置"
					})
				}
			},
			//预览
			yuLan() {
				if (this.list.length > 0) {
					uni.navigateTo({
						url: "../../yuLan/yuLan?id=" + this.id + '&wenid=' + this.wenid
					})
				} else {
					uni.showToast({
						title: "此问卷没有题目,不能预览"
					})
				}
			},
			Save() {
				let _this = this
				uni.showModal({
					title: '保存成功',
					content: '问卷保存成功,是否立即发布?',
					confirmText: '发布调查',
					confirmColor: '#209FFC',
					cancelText: '继续编辑',
					success: (res) => {
						if (res.confirm) {
							api.look({
								api: 'updatec',
								id: _this.id,
								fa: 2,
								table: 3
							}).then(res => {
								if (res.code == 200) {
									setTimeout(() => {
										uni.reLaunch({
											url: '../publish/publish?wenid=' + _this.wenid + '&wxpid=' + _this.wxpid
										})
									}, 1000)
								}
							}).catch(err => {
								console.log(err)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//单选题
			oneChoice() {
				let item = this.list.length
				uni.navigateTo({
					url: "../../questionType/oneChoice/oneChoice?wenid=" + this.wenid + '&item=' + item
				})
			},
			//多选题
			duoChoice() {
				let item = this.list.length
				uni.navigateTo({
					url: "../../questionType/duoChoice/duoChoice?wenid=" + this.wenid + '&item=' + item
				})
			},
			//填空题
			tkSubject() {
				let item = this.list.length
				uni.navigateTo({
					url: "../../questionType/tkSubject/tkSubject?wenid=" + this.wenid + '&item=' + item
				})
			},
			//图库选题
			chooseSubject() {
				uni.navigateTo({
					url: "../../questionType/chooseSubject/chooseSubject?id=" + this.wenid
				})
			},
			//文本导入
			textLead() {
				uni.navigateTo({
					url: '../../questionType/textLead/textLead?wenid=' + this.wenid
				})
			},
			//分页
			Paging() {

			},
			//备注
			beizhu() {
				uni.navigateTo({
					url: "../../questionType/beizhu/beizhu?wenid=" + this.wenid
				})
			},
			Showpopup() {
				this.$refs.popup.open()
				this.show = true
			},
			showEdit() {
				this.showedit ? this.showedit = false : this.showedit = true
			},
			//获取问卷标题 说明
			getTitle(data) {
				api.editSur(data).then(res => {
					if (res.code == 200) {
						this.title = res.date[0].namewenid
						this.id = res.date[0].id
						app.globalData.id = res.date[0].id
						res.date[0].text == "" ? this.text = "添加问卷说明" : this.text = res.date[0].text
					} else {
						uni.showToast({
							title: "查询失败",
							duration: 1000,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//获取问卷题目
			getTimu(data) {
				api.look(data).then(res => {
					if (res.code == 200) {
						var test = []
						res.date.forEach((item, index) => {
							test.push(item.id)
						})
						res.date.forEach((item1, index1) => {
							test.forEach((item, index) => {
								if (item == item1.xuantiao) {
									res.date[index1].xuantiao = index;
								}
							})
							/* if(item1.xiantiao) {
								item1.xiantiao = JSON.parse(item1.xiantiao)
								item1.xiantiaoTi = test.indexOf(item1.xiantiao[0].id) + 1
							} */
						})
						res.date.forEach((el, index) => {
							if (el.xiantiao) {
								let arr = JSON.parse(el.xiantiao)
								res.date.forEach((item, idx) => {
									if (item.id == arr[0].id) {
										el.dependTi = idx + 1
										if (arr[0].di && arr[0].di.length > 0) {
											item.di.forEach((val, i) => {
												if (val.id == arr[0].di[0]) {
													el.dependItem = i + 1
												}
											})
										}
									}
								})
							}
						})
						this.list = res.date
						this.list.forEach((item, index) => {
							item.show = false
							if (item.pid == 4) {
								item.beizhu = JSON.parse(item.beizhu)
							}
							if (item.xiantiao) {
								item.xiantiao = JSON.parse(item.xiantiao)
								item.xiantiaoTi = test.indexOf(item.xiantiao[0].id) + 1
							}
							return item
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		},
		created() {
			var that = this;
			that.height = uni.getMenuButtonBoundingClientRect().height
			that.top = uni.getMenuButtonBoundingClientRect().top
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			var that = this
			that.imgurl = app.globalData.imgurls
			app.globalData.flag = 3
			if (options.wenid && options.wenid != '') {
				that.wenid = options.wenid
				app.globalData.wenid = options.wenid
				that.getTimu({
					api: 'tables',
					wenid: that.wenid
				})
			} else {
				this.wenid = this.$store.state.wenid
			}
			let data = {
				api: 'wenfind',
				shu: '1',
				table: '3',
				wenid: that.wenid
			}
			that.getTitle(data)
			uni.getSystemInfo({
				success(res) {
					that.windowHeight = res.windowHeight
					that.staheight = res.statusBarHeight + 50
				}
			})
		},
	}
</script>

<style lang="scss">
	.spancss {
		color: #FF0000;
	}

	.status_bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		font-size: 26rpx;
		padding-bottom: 10rpx;
		z-index: 1000;

		.left {
			float: left;
			position: absolute;
			width: 100rpx;
			height: max-content;
			top: 0;
			bottom: 0;
			left: 20rpx;
			margin: auto;

			image {
				width: 25rpx;
				height: 35rpx;
			}
		}

		text {
			font-size: 30rpx;
		}
	}

	page {
		background: #F0F0F0;
	}

	.tiankong {
		input {
			width: 100%;
			height: 40rpx;
			border: 1rpx solid #dfdfdf;
			border-radius: 10rpx;
			margin: 10rpx 0;
		}
	}

	.title {
		width: 690rpx;
		margin: 0 auto;
		color: #333;
		font-size: 36rpx;
		font-weight: 500;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.shuoming {
		width: 690rpx;
		margin: 0 auto;
		line-height: 50rpx;
		color: #999;
		font-size: 24rpx;
		font-weight: 500;
		box-sizing: border-box;
	}

	.edit {
		justify-content: center;
		width: 100%;
		height: 100rpx;
		border-radius: 5rpx;
		border-top: 1rpx solid #C8C7CC;
		font-size: 24rpx;
		color: #999;
		margin: 0 auto;
		background: #F0F0F0;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.content {

		.content-item {
			// width:690rpx;
			margin: 20rpx auto;
			padding: 0 30rpx 30rpx;
			background: #fff;

			.item-title {
				line-height: 80rpx;
			}

			.item-content {
				background: #fff;
				width: 100%;
				min-height: 70rpx;
				flex-wrap: wrap;

				span {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					border: 1rpx solid #DFDFDF;
					margin-right: 10rpx;
					display: inline-block;
				}

				.diImg {
					width: 100%;
					height: 100px;
					padding: 10px 0;
					box-sizing: border-box;

					image {
						max-width: 100%;
						max-height: 100%;
						object-fit: contain;
					}
				}
			}

			.item-content.other {
				width: 50%;
			}
		}
	}

	.list {
		height: 100rpx;
		padding: 20rpx 0;
		background: #fff;
		justify-content: space-between;
		font-size: 30rpx;

		.list-item {
			padding: 0 10rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.add {
		width: 690rpx;
		height: 100rpx;
		justify-content: center;
		margin: 100rpx auto;
		border: 1px solid rgba(153, 153, 153, 1);
		border-radius: 5rpx;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.footer {
		border-top: 1rpx solid #F0F0F0;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;

		.footer-item {
			width: 25%;
			height: 100rpx;
			margin-top: 5rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	#popup {
		.popup-content {
			width: 100%;
			height: 50%;
			background: #F0F0F0;
			padding-top: 100rpx;

			.main {
				width: 690rpx;
				border-radius: 10rpx;
				background: #fff;
				margin: 40rpx auto 0;

				.top-item {
					border-bottom: 1rpx solid #F0F0F0;

					.left {
						padding-left: 73rpx;
						box-sizing: border-box;
						width: 49%;
						height: 150rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							margin-right: 50rpx;
						}
					}

					.center {
						width: 1rpx;
						height: 150rpx;
						background: #F0F0F0;
					}

					.right {
						padding-left: 73rpx;
						box-sizing: border-box;
						width: 50%;
						height: 150rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							margin-right: 50rpx;
						}
					}
				}

				.top-item-other {
					height: 150rpx;
					padding-left: 73rpx;
					box-sizing: border-box;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 50rpx;
					}
				}
			}
		}
	}

	.remark_box {
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.img_box {
			width: 100%;
			height: 200rpx;

			image {
				width: 33%;
				height: 100%;
				margin-top: 20rpx;
			}
		}
	}

	.flex_ti {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>
